<template>
  <body>
    <div>
      <el-row>
        <el-col><div class="Logintop"></div></el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="10">
          <div class="LoginCentered">
            <el-row type="flex" justify="center">
              <el-col :span="11"><div class="LoginCenteredlfet">
              <img src="../assets/img/bolema_class_default.jpg"/>
              </div></el-col>
              <el-col :span="11" :offset="1">
                <div class="LoginCenteredright">
                  <el-row type="flex" justify="center">
                    <el-col>
                      <div class="LoginCenteredright-title">教师登录</div>
                    </el-col>
                  </el-row>
                  <el-form ref="loginForm" :model="user" :rules="rules">
                  <el-row type="flex" justify="center">
                    <el-col>
                      <div class="LoginCenteredright-account">
                        <el-form-item prop="account">
                        <el-input v-model="user.account" clearable prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="center">
                    <el-col>
                      <div class="LoginCenteredright-pow">
                        <el-form-item prop="pow">
                        <el-input v-model="user.pow" clearable prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <div class="LoginCenteredright-check">
                        <input type="checkbox" class="ivu-checkbox-input">
                        <span>记住我</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <div class="LoginCenteredright-sign">
                        <el-form-item>
                          <el-button type="primary" round @click="login('loginForm')">登录</el-button>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <div class="LoginCenteredright-check">
                        <input type="checkbox" class="ivu-checkbox-input">
                        <span>我已同意《伯乐码用户服务协议》</span>
                      </div>
                    </el-col>
                  </el-row>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <p class="bottom">版权所有 © 2016-2020 上海践升信息科技有限公司沪ICP备19006290号-3</p>
    </div>
  </body>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      user: {
        account: '',
        pow: ''
      },
      loginaccount: '',
      loginusername: '',
      loginuserId: '',
      rules: {
        account: [{
          required: true, message: '账号不能为空', tigger: 'blur'
        }],
        pow: [{
          required: true, message: '密码不能为空', tigger: 'blur'
        }]
      },
      actiom: {
        login: 'LearningPlatform/manager/login'
      }
    }
  },
  components: {

  },
  methods: {
    login (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          // 通过校验，对接登录
          let params = {
            account: this.user.account,
            password: this.user.pow
          }
          http.xhrPost(this, this.actiom.login, params, (result) => {
            this.loginaccount = result.data.data.account
            this.loginusername = result.data.data.name
            this.loginuserId = result.data.data.userId
            let user = result.data
            // console.log(user.data.name)
            localStorage.setItem('name', user.data.name)
            this.$message({
              type: 'success',
              message: '登录成功,即将跳转页面',
              duration: 1000
            })
            sessionStorage.setItem('loginaccount', this.loginaccount)
            sessionStorage.setItem('loginusername', this.loginusername)
            sessionStorage.setItem('loginuserId', this.loginuserId)
            this.$router.push('/homepage')
          })
        } else {
          // 校验不通过
          return false
        }
      })
    }
  },
  mounted () {

  }
}
</script>

<style scoped="scoped">
  @import url("../assets/css/Login.css");
</style>
